﻿@model List<JustSiteWorker.Comment>
@{
    ViewBag.Title = "Index";
    string marging = "";    
}
<script src="../../Scripts/jquery.flippy.min.js"></script>
<link href="../../Style/index.css" rel="stylesheet" />

@*<a class="button" onclick="window.location = '/Home/Logout'">Log out</a>*@
@if (ViewBag.IsPrelude == "True")
{
    <div id="preView" class="preView">
        <p>
            Доброе время суток, дамы и господа. Данной темой хотелось бы Вам сообщить свою причину по которой не могу присутствовать на дне ХАИ, и просто поделиться грядущим событием в моей жизни. Хотя в этом году в любом случаи побываю в краях родного Харькова. 
        </p>
        <p>
            Тема представлена в виде маленькой загадки. На следующем представлении будет фотография, по контексту которой Вы можете догадаться, о чем идет речь. По поводу своих догадок можете оставлять комментарии <span>
                <img src="../../Images/smiles32/32%20(17).png" /></span>.
        </p>
        <p>
            Чет я затянул со вступлением, пора закругляться и переходить к делу…
        </p>
        <p style="text-align: right;">
            …о, да и чуть не забыл, всю эту текстовую ерунду вы больше не увидите <span>
                <img src="~/Images/smiles32/32%20(14).png" /></span>
        </p>

        <p style="text-align: right;">
            С уважением, Андрей <span>
                <img src="~/Images/smiles32/32%20(1).png" /></span>
        </p>

        @* <input type="button" value="Перейти" onclick="showContent()" style="margin: 20px auto; display: block;" />*@
        <div style="text-align: center; margin: 20px auto;">
            <a class="a_arrow_button" onclick="showContent()">Перейти</a>
        </div>

        <img src="~/Images/image-secret.jpg" height="300" style="margin: auto; display: block;" />
    </div>
}

<div id="mainContent">
    <div style="text-align: center;">
        <h2>...</h2>
        <img src="../../Images/mi.JPG" width="780" />
        <h2>По поводу вашых догадок жду коментариев ;)</h2>
    </div>
    <div id="commentsArea">

        @foreach (JustSiteWorker.Comment comment in Model)
        {
            marging = comment.Margin == (int)Margin.Smal ? "same-user" : "another-user";

            if (comment.Side == (int)Side.Left)
            {
            <div id="@comment.Id" class="comment-div">
                <table class="left-comment @marging ">
                    <tr>
                        <td class="avatar">
                            <img src="@comment.User.Avatar" />
                        </td>
                        <td class="triangle">
                            <div></div>
                        </td>
                        <td class="message">
                            <div>
                                <p class="user-name"><span class="name-style">@comment.User.Name</span></p>
                                @comment.Message
                                <p class="date">@comment.Date.ToString("dd.mm.yyyy hh:mm")</p>
                            </div>
                        </td>
                        <td></td>
                    </tr>
                </table>
            </div>
            }
            else
            {
            <div id="@comment.Id" class="comment-div">
                <table class="right-comment @marging" border="0">
                    <tr>
                        <td class="message">
                            <div>
                                <p class="user-name"><span class="name-style">@comment.User.Name</span></p>
                                @comment.Message
                                <p class="date">@comment.Date.ToString("dd.mm.yyyy hh:mm")</p>
                            </div>
                        </td>
                        <td class="triangle">
                            <div></div>
                        </td>
                        <td class="avatar">
                            <img src="@comment.User.Avatar" />
                        </td>
                    </tr>
                </table>
            </div>
            }
        }
    </div>
    <br />
    <div>
        <div class="send-comment">

            <table>
                <tr>
                    <td class="avatar invisible">
                        <img src="@Session["Icon"]" />
                    </td>
                    <td class="triangel invisible">
                        <div></div>
                    </td>
                    <td class="message">
                        <textarea id="newComment" placeholder="Коментарий..." class="invisible"></textarea>
                        <input id="fakeArea" type="text" placeholder="Коментарий..." />
                    </td>
                </tr>
                <tr class="button invisible">
                    <td></td>
                    <td></td>
                    <td>
                        @*<input id="sendButton" type="button" value="Отправить" onclick="addComment()" />*@
                        <a id="sendButton" class="button" onclick="addComment()">Отправить</a>
                        <span id="ajaxLoader" class="invisible">
                            <img src="../../Images/ajax-loader.gif" />Отправка...</span>
                    </td>
                </tr>
            </table>
        </div>
        <div style="height: 20px;"></div>
    </div>
</div>

<input type="hidden" value="@ViewBag.IsPrelude"  id="isShow"/>

@*<audio src="~/App_Data/message.mp3" controls>	
	
</audio>*@

<audio id="player" preload="auto" autobuffer>
    @*<source src="http://traffic.libsyn.com/altmod/indiefeed_65daysofstatic_px3.mp3" />*@
    <source src="../../App_Data/message.mp3" />
</audio>
<span id="pause">Pause</span><span id="play">Play</span>

<audio src="../../App_Data/message.mp3" id="messageSound"></audio>
<script>

    var foo = document.getElementById('player');

    $('#pause').click(function () {
        $('#player').get(0).pause();
    });


    $('#play').click(function () {
        $('#player').get(0).play();
    });
</script>

<script>
    $("#fakeArea").focus(function () {
        hideComment();

        var scrool = $(document).scrollTop();
        var h = $('#content').height();

        if (h > scrool) {
            $(document).scrollTop(h);
        }
    });

    $("#newComment").keypress(function (event) {
        debugger
        if (event.keyCode == 13)
            addComment();
    });

    function hideComment() {
        $(".send-comment .avatar, .send-comment .triangel, .send-comment #newComment, .send-comment .button").removeClass('invisible');
        $("#fakeArea").addClass('invisible');

        $('#newComment').focus();
        calculateHeight();
    }

    function showComent() {
        $(".send-comment .avatar, .send-comment .triangel, .send-comment #newComment, .send-comment .button").addClass('invisible');
        $("#fakeArea").removeClass('invisible');
        calculateHeight();
    }

    $("#newComment").focusout(function () {
        var message = $('#newComment').val();
        if (message == "" || message == " ") {
            showComent();
        }
    });

    function addComment() {
        //get message
        var message = $('#newComment').val();

        //hide send button, disable textarea and show ajax loader
        $('#sendButton').addClass('invisible');
        $("#newComment").prop("disabled", true);
        $('#ajaxLoader').removeClass('invisible');

        $.ajax({
            type: "POST",
            url: "/Home/AddComment",
            contentType: 'application/json',
            async: true,
            data: JSON.stringify({ message: message }),
            success: function (response) {
                //clear message
                $("textarea#newComment").val("");
                hideComment();

                //show message
                add(response);

                //show send button, enable text area and hide ajax loader
                $('#sendButton').removeClass('invisible');
                $("#newComment").prop("disabled", false);
                $('#ajaxLoader').addClass('invisible');

                $('#newComment').focusout();
                calculateHeight();
            }
        });
    }

    function add(comment) {
        var c = "";
        var margin = comment.Margin == "1" ? "same-user" : "another-user";
        if (comment.Side == 0) {
            c = leftComment(comment, margin);
        }
        else {
            c = rightComment(comment, margin);
        }
        $('#commentsArea').append(c);
        $("#" + comment.Id).animate({ opacity: 1 }, 800);

        calculateHeight();
    }

    function leftComment(data, margin) {
        var com = '<div id="' + data.Id + '" class="comment-div" style="opacity: 0">' +
                    '<table class="left-comment ' + margin + '">' +
                        '<tr>' +
                            '<td class="avatar">' +
                                '<img src="' + data.Icon + '" />' +
                            '</td>' +
                            '<td class="triangle">' +
                                '<div></div>' +
                            '</td>' +
                            '<td class="message">' +
                                '<div>' +
                                    '<p class="user-name"><span class="name-style">' + data.UserName + '</span></p>' +
                                    data.Message +
                                    '<p class="date">' + data.Date + '</p>' +
                                '</div>' +
                            '</td>' +
                            '<td></td>' +
                        '</tr>' +
                    '</table>' +
                '</div>' +
                  '';
        return com;
    }

    function rightComment(data, margin) {
        var com = '<div id="' + data.Id + '" class="comment-div" style="opacity: 0">' +
                    '<table class="right-comment ' + margin + '" border="0">' +
                        '<tr>' +
                            '<td class="message">' +
                                '<div>' +
                                    '<p class="user-name"><span class="name-style">' + data.UserName + '</span></p>' +
                                     data.Message +
                                    '<p class="date">' + data.Date + '</p>' +
                                '</div>' +
                            '</td>' +
                            '<td class="triangle">' +
                                '<div></div>' +
                            '</td>' +
                            '<td class="avatar">' +
                                '<img src="' + data.Icon + '" />' +
                            '</td>' +
                        '</tr>' +
                    '</table>' +
                '</div>';

        return com;
    }


    longPulling();
    function longPulling() {
        var ids = [];
        $('div.comment-div').each(function () {
            ids.push($(this).attr('id'));
        });

        $.ajax({
            type: 'POST',
            url: '/Home/GetNewMessage',
            data: JSON.stringify({ list: ids }),
            contentType: 'application/json',
            success: function (response) {
                if (response.Update) {
                    $.each(response.Data, function (index, comment) {
                        add(comment);
                    });
                }

                setTimeout(function () {
                    longPulling();
                }, 1000);
            }
        });
    }

    function showContent() {
        $("#preView").hide(1000, callback);

        $("#mainContent").show(1000, callback);
    }

    function callback() {
        calculateHeight();
    };

    initContent();
    function initContent() {
        if ($('#isShow').val() == "True")
            $('#mainContent').hide(1);
        else
            $('#preView').hide(1);
    }
</script>



<style>
    .preView {
        font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
        font-size: 18px;
        color: #2d6277;
        font-weight: bold;
    }
</style>
